<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="../css/reg_style.css">
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="../js/commons.js"></script>
</head>
<body>

<form onsubmit="return reg()" method="post">
    <div class="a">
        <div class="reg_div">
            <h2>用户注册</h2>
            <div class="reg_box">
                <input type="text" name="username" id="username" autocomplete="off" required="required"/><label
                    for="username">请输入电话号码</label>
            </div>
            <div class="reg_box">
                <input type="text" name="phoneCode" id="code" autocomplete="off" required="required"/>
                <label for="code" >请输入验证码</label>
            </div>
            <p id="msg"></p><br>
            <div class="code_btn">
                <input type="button" name="get_code" id="get_code" value="获取验证码"/>
            </div>
            <input type="button" class="next" value="下一步" onclick="return judge()">

            <a href="login.html" target="_self" class="to_reg">已有账号？点击登录</a>
        </div>
    </div>
    <div class="b">
        <div class="reg_div">
            <h2>请填写个人信息</h2>
            <div class="reg_box">
                <input type="text" name="nickname" id="nickname" autocomplete="off"/>
                <label for="nickname">请输入用户名</label>
            </div>
            <div class="reg_box">
                <input type="text" name="password" id="password" autocomplete="off"/>
                <label for="password">请输入密码</label>
            </div>
            <div class="reg_box">
                <input type="email" name="email" id="email" autocomplete="off"/>
                <label for="email">请输入邮箱</label>
            </div>
            <div class="reg_box">
                <select class="sex" name="sex" id="sex">
                    <option value=" " required="required" class="option" disabled selected></option>
                    <option value="0" class="option">男</option>
                    <option value="1" class="option">女</option>
                </select>
                <label for="sex" id="sex_label">请选择性别</label>
            </div>

            <div class="reg_box">
                <select class="role" name="roles" id="role">
                    <option value=" " class="option" required="required" disabled selected></option>
                    <option value="1" class="option">求职者</option>
                    <option value="2" class="option">招聘者</option>
                    <option value="3" class="option">公司</option>
                </select>
                <label for="role" id="role_label">请选择身份</label>
            </div>

            <div class="reg_box">
                <label for="birthday" id="birthday_label"> </label>

                <input type="date" name="birthday" id="birthday" required="required" value="2000-01-01"/>

            </div>
            <input type="submit" class="reg" value="完成注册"><br>
            <a href="login.html" target="_self" class="to_reg">已有账号？点击登录</a>
        </div>
    </div>
</form>

<script>
    // 获取验证码时对手机号码进行验证
    $("#get_code").click(function() {
        let count = 60;
        let phone = $('#username').val();
        let flag = false;
        // 移动 联通 电信
        const regular = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
        let message = "";
        if("" === phone){
            message = "手机号码不能为空！";
            $('#msg').text(message);
            $("#msg").show().delay(2000).fadeOut();
        }else if(phone.length !==11){
            message = "请输入正确的手机号码！";
            $('#msg').text(message);
            $("#msg").show().delay(2000).fadeOut();
        }else if(!regular.test(phone)){
            message = "请输入正确的手机号码！";
            $('#msg').text(message);
            $("#msg").show().delay(2000).fadeOut();
            /*        }else if(checkPhoneIsExist()){
                        message = "该手机号码已经被绑定！";
                        console.log(message);
                        $('#msg').text(message);
                        $("#msg").show().delay(1000).fadeOut();*/
        }else{
            if (count === 60) {
                const countDown = setInterval(() => {
                    if (count === 0) {
                        $("#get_code").attr("value", "重新获取").removeAttr('disabled');
                        $("#get_code").css({
                            background: '#ff9400',
                            color: '#fff',
                        });
                        clearInterval(countDown);
                    } else {
                        $("#get_code").attr('disabled', "true");
                        $("#get_code").css({
                            background: 'rgb(255,255,255)',
                            color: 'rgb(0,0,0)',
                        });
                        $("#get_code").attr("value", "重新获取("+count+")");
                    }
                    count--;
                }, 1000);
            }
        }
    });

    //select标签属性动态变化
    $("#sex").change(function () {
        $("#sex_label").css({
            visibility:"hidden"
        });
        $("#sex").css({
            color:"white"
        })
    });

    //select标签属性动态变化
    $("#role").click(function () {
        $("#role_label").css({
            visibility:"hidden"
        });
        $("#role").css({
            color:"white"
        })
    });

    $("#birthday").click(function () {
        $("#birthday_label").css({
            visibility:"hidden"
        });
    });

    // 注册函数
    function reg (){
        let params = {};
        let serializeArray = $("form").serializeArray();
        $.each(serializeArray,function (index, ele){
            params[ele.name] = ele.value;
        });

        $.ajax({
            url: URL + "user/userReg",
            type: "post",
            data: params,
            success: function (result){
                if (result.code == 0){
                    window.location.href = "login.html";
                } else {
                    alert(result.msg);
                }
            }
        });
        return false;
    }

    // 注册时输入框验证
    function judge() {
        let message = "";
        let phone = $('#username').val();
        let phoneCode=$("#phoneCode").val();
        if ("" === phone){
            message = "请填写手机号！";
            $('#msg').text(message);
            $("#msg").show().delay(2000).fadeOut();
        }else if ("" === phoneCode){
            message = "请填写验证码！";
            $('#msg').text(message);
            $("#msg").show().delay(2000).fadeOut();
        }else {
                $(".a").slideUp();
                $(".b").css({
                    visibility:"visible"
                })
        }
    }
</script>
</body>
</html>